<template>
    <div>
        <el-row>
            <el-button v-for="item in contents" size="small" :subjectid="item.id" :type="item.tagcss"  v-on:click="changetag" plain>
                <el-badge v-if="item.selected" is-dot class="item">{{item.title}}</el-badge>
                <template v-else>
                    {{item.title}}
                </template>
            </el-button>
            <template v-show="mode=='show'">
                <!-- 这些按钮需要定义组件 -->
                <router-link :to="'/contentedit/'+subjectid+'/'+attributeid" style="float:right;padding-left:8px;" >
                <el-button  size="small"  style="float:right;" icon="el-icon-search" circle></el-button>
                </router-link>
                <router-link :to="'/contentedit/'+subjectid+'/'+attributeid" style="float:right;padding-left:8px;" >
                    <el-button  size="small"  type="primary" icon="el-icon-edit"  circle></el-button>
                </router-link>
                <el-button  size="small"  style="float:right;margin-left:10px;" type="success" icon="el-icon-check" v-on:click="saymessage($event, '提交')" circle></el-button>
                <el-button  size="small"  style="float:right;margin-left:10px;" type="warning" icon="el-icon-star-off" v-on:click="saymessage($event, '收藏')" circle></el-button>
                <el-button  size="small"  style="float:right;" type="danger" icon="el-icon-delete" v-on:click="saymessage($event, '删除')" circle></el-button>
            </template>
        </el-row>

        <el-row :gutter="12" style="margin-top:20px;">
            <el-col :span="24" v-for="item in topContent" >
                <el-card shadow="always">
                {{item.title}} <span style="font-size:10px;color:gary;">{{item.resume}}</span>
                <hr style="height:1px; border:0px; border-bottom:1px solid #e3e3e3;"/>
                <div style="border:0px solid #e3e3e3; overflow:auto;"  class="md_css">
                    <!-- <mavon-editor v-model="item.content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 370px"/> -->
                    <span v-html="convertHtml(item.content)"></span>
                </div>
                </el-card>
            </el-col>
            <el-col :span="12" v-for="item in otherContents" style="margin-top:20px;"  class="md_css">
                <el-card shadow="hover">
                {{item.title}} <span style="font-size:10px;color:gary;">{{item.resume}}</span>
                <hr style="height:1px; border:0px; border-bottom:1px solid #e3e3e3;"/>
                <span v-html="convertHtml(item.content)"></span>
                </el-card>
            </el-col>
            
        </el-row>
    </div>
</template>

<script>
    import 'mavon-editor/dist/css/index.css'
    export default {
        data() {
            return {
                currentID:0,
                html:"",
                contents :[
                    { id:1, title:"C#", content:"## 具体的产品描述",resume:"具体简述" ,selected:true, tagcss:"success"},
                    { id:2, title:"JAVA", content:"## 具体的产品描述\r\n> 1. test1   \r\n> 2. test2    \r\n> 3. test3 ",resume:"具体简述" ,selected:false, tagcss:"danger"},
                    { id:3, title:"PYTHON", content:'```js\n console.log("hello"); \n```',resume:"具体简述",selected:false, tagcss:"success" },
                    { id:4, title:"PHP", content:"具体的产品描述",resume:"具体简述" ,selected:false, tagcss:"info"},
                    { id:5, title:"RUBY", content:"具体的产品描述",resume:"具体简述",selected:false, tagcss:"warning"},
                ]
            }
        },
        components:{
            // marked
        },
        computed:{
            topContent: function () {
                var id =  this.currentID;
                return this.contents.where(function(item){ return item.id == id; });
            },
            otherContents:function(){
                var id =  this.currentID;
                return this.contents.where(function(item){ return item.id != id; });
            }
        },
        props: ['subjectid','attributeid'],
        beforeRouteUpdate(){
            alert(6);
        },
        methods:{
            loadDate:function(){
                //加载右侧属性菜单
                this.$http.get('http://localhost:5001/Contrast_theme?limit=100&page=1');             
            },
            changetag:function(event){
               var _subjectid = event.currentTarget.getAttribute("subjectid");
               var _i = 1;
               this.contents.forEach(element => {
                   element.selected = element.id == _subjectid;
                   element.sort = element.id == _subjectid ? 1 : _i;
                   _i ++ ;
               });
               this.currentID = _subjectid;
            },
            saymessage:function(event,msg){
               this.$message({
                message: '点点点点，再点我也不会给你'+msg+'!',
                type: 'warning'
                });
            },
            change(value, render){
                // render 为 markdown 解析后的结果
                this.html = render;
            },
            convertHtml:function(ct){
                return marked(ct);
            }
        },
        mounted:function(){
            this.currentID = this.contents[0].id; 

            hljs.initHighlightingOnLoad();
            marked.setOptions({
                renderer: new marked.Renderer(),
                gfm: true,
                tables: true,
                breaks: false,
                pedantic: false,
                sanitize: false,
                smartLists: true,
                smartypants: false,
                highlight: function (code, lang) {
                    if (lang && hljs.getLanguage(lang)) {    
                        return hljs.highlight(lang, code, true).value;
                    } else {
                        return hljs.highlightAuto(code).value;
                    }
                }
            });
        },
        watch:{
            '$route' (to, from) {
                this.loadDate();
            }
        }
    }
</script>

<style scoped>
    .el-card{ height: 240px;}
    .el-tag {margin-right:6px;}
</style>